import React, { Component } from 'react';
import { WeaTop, WeaTab, WeaNewScroll, WeaRightMenu, WeaLocaleProvider } from 'ecCom';
import { Button } from 'antd';
import { observer, inject } from 'mobx-react';
import { WeaTableNew, WeaLogView } from 'comsMobx';

const WeaLogViewComp = WeaLogView.Component;
const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;


@inject('alterLogStore')
@observer
class AlterLog extends Component {
  constructor(props) {
    super(props);
    this.getColumns = this.getColumns.bind(this);
  }
  componentDidMount() {
    const { alterLogStore } = this.props;
    const { getLogTableData, getTabData, getSearchForm, getLogParams } = alterLogStore;
    getLogTableData();
    getTabData();
    getSearchForm();
    getLogParams();
  }

  getTabButtonsAd() {
    let { getSearchData, SearchForm, showtTag } = this.props.alterLogStore;
    return [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9xloqv@search`} type="primary" onClick={() => getSearchData()}>{getLabel(388113, '搜索')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@35hlnc@reset`} type="ghost" onClick={() => SearchForm.resetForm()}>{getLabel(2022, '重置')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tskd6f@cancel`} type="ghost" onClick={() => showtTag()}>{getLabel(31129, '取消')}</Button>),
    ];
  }

  getSearchForm() {
    const { alterLogStore } = this.props;
    const SearchForm = alterLogStore.SearchForm;
    return (
      <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@t3p38b`} ref="scroll">
        {SearchForm.render({ needTigger: true })}
      </WeaNewScroll>
    );
  }
  getColumns(columns) {
    const alterLogStore = this.props.alterLogStore;
    return columns.map((col) => {
      if (col.dataIndex == 'ModifyDetails') {
        return {
          ...col,
          title: col.title,
          className: 'lookOver',
          render: (text, record) => (
            <a onClick={() => alterLogStore.lookOver(record.targetid, record.LOGSMALLTYPELABEL)}>{text}</a>
          ),
        };
      }
      return col;
    });
  }

  getRightMenu() {
    const { alterLogStore } = this.props;
    const { logTableStore } = alterLogStore;
    const rightMenuDatas = [{
      key: '1',
      disabled: false,
      icon: <i className="icon-coms-Add-to" />,
      content: getLabel('387597', '导出EXCLE'),
      onClick: () => logTableStore.exportCurrent(),
    }];
    return rightMenuDatas;
  }

  render() {
    let alterLogStore = this.props.alterLogStore;
    let { logTableStore, topTab, selectedKey, showSearchAd, showtTag, changeDate, showSearchDrop, logVisible, toggleLog, logStore, logType, logSmallType, targetId } = alterLogStore;
    return (
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@51nvs8`} datas={this.getRightMenu()}>
        <div className="alterLogtop">
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@w4b8wh`}
            title={<span style={{ color: '#333333' }}>{getLabel(387596, '变更日志')}</span>}
            icon={<i className="icon-coms-rizhizhongxin" />}
            iconBgcolor="#0079DE"
            buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kzv8t2@export`} type="primary" onClick={() => logTableStore.exportCurrent()}>{getLabel(387597, '导出EXCLE')}</Button>]}
          >
            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@myy0yb`}
              datas={topTab}
              selectedKey={selectedKey}
              searchType={['advanced']}
              showSearchAd={showSearchAd}
              setShowSearchAd={bool => showtTag(bool)}
              buttonsAd={this.getTabButtonsAd()}
              searchsAd={this.getSearchForm()}
              keyParam="viewcondition" // 主键
              onChange={(v) => {
                changeDate(v);
              }}
              showSearchDrop={showSearchDrop}
              advanceHeight={80}
            />
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@urm3dg`}
              needScroll={true}
              comsWeaTableStore={logTableStore}
              getColumns={this.getColumns.bind(this)}
            />
            <WeaLogViewComp ecId={`${this && this.props && this.props.ecId || ''}_WeaLogViewComp@wbmwk7`}
              visible={logVisible}
              onCancel={() => toggleLog()}
              logStore={logStore}
              logType={logType}
              logSmallType={logSmallType}
              targetId={targetId}
            />
          </WeaTop>
        </div>
      </WeaRightMenu>

    );
  }
}
export default AlterLog;
